<script>
import {handleSuccess, handleError} from "@/util/request";
export default {
  name: "LoginPage",
  data() {
    return {
      // 绑定当前登录的用户
      user: {
        account:'u001',
        password:'12345'
      },
      // 绑定校验规则
      rules: {
        account: [
          { required:true, message:'请输入账户名', trigger:'blur'}
        ],
        password: [
          { required:true, message:'请输入密码', trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    // 提交表单, 进行登录
    submitForm(formName) {
      // 先根据表单名找到表单, 进行校验, 得到校验结果valid
      this.$refs[formName].validate((valid) => {
        // 如果校验结果为true, 说明校验通过, 执行http-post登录请求
        if (valid) {
          this.$http.post('/user/login', this.user)
              .then((result) => {
                // 将result交给handleSuccess进行统一业务异常处理
                // 并拿到handleSuccess返回的对象, 我们在handleSuccess中返回的是result中的第三层对象, 即后端响应的数据
                // 这里的第三层对象是user对象, 定义一个变量user接收
                const user = handleSuccess(result)
                // 如果user不为空说明登录业务成功, js中判空可以直接 if(变量名)
                if (user) {
                  // 将user存储到localStorage中
                  localStorage.setItem('user', JSON.stringify(user))
                  // 跳转路由到主页
                  this.$router.replace('/')
                }
              })
              .catch((error)=> {
                // 将error交给handleError进行统一HTTP请求异常处理
                handleError(error)
              })
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<template>
  <div class="bg">
    <div class="login-box">
      <div class="login-title">供应商采购审批系统</div>
      <el-form ref="form" :model="user" :rules="rules" class="login-form">
        <el-form-item prop="account">
          <el-input placeholder="请输入账户名" v-model="user.account">
            <template slot="prepend">
              <div class="el-icon-user-solid"></div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="user.password" @keyup.enter.native="submitForm('form')"  show-password>
            <template slot="prepend">
              <div class="el-icon-lock"></div>
            </template>
          </el-input>
        </el-form-item>
        <div style="display: flex; justify-content: space-between">
          <el-button type="primary" @click="submitForm('form')" >登录</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.bg {
  height: 100vh;
  background-color: whitesmoke;
}
.login-box {
  width: 550px;
  padding: 50px;
  background-color: #545c64;
  border-radius: 10px;
  box-shadow: 0 0 10px gray;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.login-form {
  width: 74%;
  margin: auto;
}
.login-title {
  padding-bottom: 30px;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  color: whitesmoke;
  cursor: pointer;
}
</style>